<template>
  <div class="x-course" @click="nav2CourseCatalogue">
    <div class="course-img">
      <video v-if="suffix === 'mp4'" :src="data.courseImgUrl"></video>
      <img v-else :src="data.courseImgUrl">
    </div>
    <div class="course-name">{{ data.courseTitle }}</div>
    <div class="course-time">{{ getTime(data.updateTime) }}</div>
  </div>
</template>

<script>
export default {
  name: 'course',
  props: {
    data: {
      type: Object,
      default: () => { return {} }
    },
    showTrainFlag: { // 控制培训状态显示
      type: Boolean,
      default: false
    },
    showStudyFlag: { // 控制学习状态显示
      type: Boolean,
      default: false
    },
    showTrainEndTime: { // 培训截止时间显示
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      trainFlagMap: { // 培训状态
        1: '未培训', 2: '培训中', 3: '已培训',
      },
      studyFlagMap: { // 学习状态
        1: '未学习', 2: '学习中', 3: '已学习',
      },
      suffix: ''
    };
  },
  mounted(){
    if(this.data.courseImgUrl){
      this.suffix = this.getFileExtension(this.data.courseImgUrl);
    }
  },
  methods: {
    nav2CourseCatalogue () {
      this.$router.push({
        name: 'courseDetail',
        query: {
          id: this.data.id
        },
      })
    },
    getTime(val){
      return this.$moment(val).format('YYYY-MM-DD HH:mm:ss')
    },
    getFileExtension(filename) {
      // 使用split分割字符串，并取得最后一个元素（后缀名）
      const extension = filename.split('.').pop();
      // 返回后缀名，如果不存在则返回空字符串
      return extension || '';
    },
  },
};
</script>

<style lang="scss" scoped>
.x-course {
  box-shadow: 0 8px 18px 0 rgba(1,15,30,0.11);
  position: relative;
  cursor: pointer;
  background-color: #fff;
  transition: all 0.2s;
  border-radius: 12px;
  /*width: 320px;*/
  /*height: 260px;*/
  padding-bottom: 0.1rem;
  overflow: hidden;
  &:hover {
    box-shadow: 0 1px 3px rgba(0,0,0,0.02), 0 16px 32px -4px rgba(0,0,0,0.17);
    transform: translateY(-4px);
  }
  .course-img{
    height: 1.2rem;
    text-align: center;
    video{
      display: inline-block;
      height: 100%;
      width: 100%;
    }
    img{
      display: inline-block;
      height: 100%;
      width: 100%;
    }
  }
  .course-name{
    padding: 0.067rem 0.133rem 0;
    font-size: 0.113rem;
  }
  .course-time{
    padding: 0.067rem 0.133rem 0;
    font-size: 0.0933rem;
    color: #999999;
  }
}
</style>
